<!DOCTYPE html>
<html>
  <head>
    <title>List Move Transitions Sudoku Example</title>
    <script src="https://unpkg.com/vue@2"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/style.css" />
  </head>
  <body>
    <div id="sudoku-demo" class="demo">
      <h1>Lazy Sudoku</h1>
      <p>Keep hitting the shuffle button until you win.</p>

      <button @click="shuffle">
        Shuffle
      </button>
      <transition-group name="cell" tag="div" class="container">
        <div v-for="cell in cells" :key="cell.id" class="cell">
          {{ cell.number }}
        </div>
      </transition-group>
    </div>

    <script>
      new Vue({
        el: "#sudoku-demo",
        data: {
          cells: Array.apply(null, { length: 81 }).map(function(_, index) {
            return {
              id: index,
              number: (index % 9) + 1
            };
          })
        },
        methods: {
          shuffle: function() {
            this.cells = _.shuffle(this.cells);
          }
        }
      });
    </script>
  </body>
</html>
